<template>
    <div>
        <div>{{message}}</div>
        <button @click="click">Click App</button>
        <button @click="stopEventListener">Stop EventListener</button>
        <button @click="forceUpdate">Force Update</button>
        <br/>
        <text-btn ref="tb01"></text-btn>
        <text-btn ref="tb02"></text-btn>
    </div>
</template>
<script>
    // import TextBtn from './components/TextBtn.vue';
    import Loading from './components/Loading.vue';
    import Error from './components/Error.vue';

    export default {
        mounted() {
            this.$on('test-event01', function () {
                alert('test-event01');
            })
            // this.$once('test-event01',function () {
            //     alert('test-event01');
            // })
        },
        data() {
            return {
                message: 'Hello Vue!!!'
            }
        },
        inject: ['foo'],
        methods: {
            click() {
                // alert(this.message);
                console.dir(this);
                console.dir(this.$root.message);
                // this.$root.test();
                console.dir(this.$parent == this.$root);

                console.dir(this.foo);

                // this.$emit('test-event01');
            },
            stopEventListener() {
                this.$off('test-event01')
            },
            forceUpdate() {
                this.$forceUpdate();
            }
        },
        components: {
            // TextBtn:function (resolve, reject) {
            //     require(['./components/TextBtn.vue'],resolve);
            // }
            // TextBtn: resolve => require(['./components/TextBtn.vue'], resolve)
            // TextBtn: () => import('./components/TextBtn.vue')
            TextBtn: () => ({
                component: import('./components/TextBtn.vue'),
                loading: Loading,
                error: Error,
                delay: 200,
                timeout: 1000
            })
        }
    }
</script>
<style scoped>
    div {
        background-color: yellow;
    }
</style>
